{extend name="common/index" /} {block name="style"}
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/index.css" type="text/css">
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/member.css" type="text/css">
<script type="text/javascript" src="__TEMPLATE__/sysme/js/aa.js"></script>
<link rel="stylesheet" type="text/css" href="__SYSMET__/lib/Hui-iconfont/1.0.8/iconfont.css" />

<script src="__TEMPLATE__/sysme/tili/js/jquery.1.7.2.min.js"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_002.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_004.js" type="text/javascript"></script>
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll_002.css" rel="stylesheet" type="text/css">
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll.css" rel="stylesheet" type="text/css">
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_003.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_005.js" type="text/javascript"></script>
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll_003.css" rel="stylesheet" type="text/css"> {/block} {block name="body"}

<style type="text/css">
	.czjekj {
		display: inline-block;
		width: 20%;
		height: 20px;
		text-align: center;
		font-size: 12px;
		border: 1px solid #ccc;
		color: #000;
		border-radius: 6px;
		line-height: 20px;
		margin-right: 3%;
		background: #cccccc91;
	}
	
	form {
		width: 100%;
		margin-top: 75px;
	}
	
	.xzfs {
		width: 100%;
	}
	
	.xzfs div {
		overflow: hidden;
		margin: 0 5% 15px;
	}
	
	.xzfs div>span {
		width: 25%;
		display: block;
		font-size: 14px;
		font-weight: bold;
		float: left;
		height: 30px;
		line-height: 30px;
	}
	
	.xzfs div input {
		display: block;
		float: left;
		width: 75%;
		text-indent: 5px;
		height: 30px;
		line-height: 30px;
		color: #675656;
	}
	
	.xzfs div select {
		display: block;
		float: left;
		width: 75%;
		line-height: 30px;
		height: 30px;
		color: #675656;
	}
	
	.tijiao {
		width: 90%;
		height: 30px;
		display: block;
		line-height: 30px;
		background: #d91d36;
		border-radius: 4px;
		color: #fff;
		margin: 20px auto;
		font-size: 12px;
	}
</style>

<form method="post" enctype="">
	<div class="xzfs">
		<div>
			<span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;:&nbsp;</span>
			<input type="text" style="border:1px solid #ccc;text-indent: 4%;" id="username" name="username" value="{$username}" readonly="readonly" />
		</div>
		<div>

			<span>充值金额：</span>
			<input type="number" style="border:1px solid #ccc;text-indent: 4%;" name="amount" id="amount" required="required" value="">
			<p style="float:left;overflow: hidden;margin-top:10px;width:75%;margin-left:25%;" class="czje_q"><span class="czjekj" id="czje_w">50元</span> <span class="czjekj" id="czje_y">100元</span> <span class="czjekj" id="czje_e">200元</span> <span class="czjekj" id="czje_ws" style="float:right;margin-right:0;">500元</span> </p>
		</div>

		<div>
			<span>选择方式&nbsp;:&nbsp;</span>
			<select name="pay_type" id="pay_type" style="text-indent: 3%;">
				{foreach($pay_type as $k=>$v)}
				<option value="{$k}">{$v}</option>
				{/foreach}
			</select>
		</div>

	</div>
	<input class="tijiao" id="tijiao" type="button" value="提交" />
</form>
<div id="tishi" style="width:200px;height:60px;opacity: .6;background:#000;position:fixed;left:50%;margin-left:-100px;top:100px;display:none;"></div>
<div id="tishi_nr" style="width:200px;height:60px;color:#fff;font-size:14px;text-align:center;position:fixed;left:50%;top:100px;margin-left:-100px;z-index: 1;display:none;padding:10px;"></div>
<script>
	var pay = true
	$('#tijiao').click(function() {
		$('.czje_q').children('span').css('background', '')
		$('.czje_q').children('span').css('color', '#000')
		var username = $('#username').val(),
			amount = $('#amount').val(),
			pay_type = $('#pay_type').val();
		if(amount == '') {
			$('#tishi').css('display', 'block')
			$('#tishi_nr').css('display', 'block')
			$('#tishi_nr').html('请填写充值金额')
			setTimeout(function() {
				$('#tishi').css('display', 'none')
				$('#tishi_nr').css('display', 'none')
			}, 2000)
		} else if(amount < 50) {
			$('#tishi').css('display', 'block')
			$('#tishi_nr').css('display', 'block')
			$('#tishi_nr').html('充值金额最低为五十元')
			setTimeout(function() {
				$('#tishi').css('display', 'none')
				$('#tishi_nr').css('display', 'none')
			}, 2000)
		} else if(amount > 50000) {
			$('#tishi').css('display', 'block')
			$('#tishi_nr').css('display', 'block')
			$('#tishi_nr').html('充值金额最高为五万元')
			setTimeout(function() {
				$('#tishi').css('display', 'none')
				$('#tishi_nr').css('display', 'none')
			}, 2000)
		} else {
			if(pay == false) return;
			pay = false

			$(this).val('提交中')
			$.ajax({
				type: "post",
				url: "{:url('index/paygt/initPay')}",
				data: {
					"username": username,
					"amount": amount,
					"pay_type": pay_type
				},
				success: function(data) {
					$('#tijiao').val('提交')
					var dataJson = data
					if(dataJson.status == '200') {
						location.href = dataJson.data
						pay = true
					} else {
						//alert(dataJson.info)
						$('#tishi').css('display', 'block')
						$('#tishi_nr').css('display', 'block')
						$('#tishi_nr').html(dataJson.info)
						setTimeout(function() {
							$('#tishi').css('display', 'none')
							$('#tishi_nr').css('display', 'none')
						}, 2000)
						pay = true
					}

				}

			});
		}
	})

	$('.czje_q').children('span').click(function() {

		$('.czje_q').children('span').css('background', '')
		$('.czje_q').children('span').css('color', '#000')
		$(this).css('background', '#d91d36')
		$(this).css('color', '#fff')

		var str = $(this).html();
		var s = str.substring(0, str.length - 1)
		$('#amount').val(s);

	})
</script>

{/block}}